<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>5.Bootstrap表格</title>

    <link rel="stylesheet" href="../css/bootstrap.css"/>

    <script src="../js/jquery-1.11.1.min.js"></script>
    <script src="../js/bootstrap.js"></script>
</head>
<body>

    <div class="container">
        <!--<div class="table-responsive">-->
        <!-- table-striped条纹状 table-bordered边框 table-condensed紧缩内容  table-hover-->
       <table class="table">
           <thead>
               <tr>
                   <th>水果</th>
                   <th>价格</th>
                   <th>重量</th>
                   <th>重量</th>
                   <th>重量</th>
                   <th>重量</th>
                </tr>
           </thead>
           <tbody>
           <tr class="active">
               <td>苹果</td>
               <td>7.8</td>
               <td>2</td>
               <td>2</td>
               <td>2</td>
               <td>2</td>
           </tr>
           <tr>
               <td class="success">香蕉</td>
               <td>4.8</td>
               <td>3</td>
               <td>3</td>
               <td>3</td>
               <td>3</td>
           </tr>
           <tr class="info">
               <td>火龙果</td>
               <td>12</td>
               <td>4</td>
               <td>4</td>
               <td>4</td>
               <td>4</td>
           </tr>
           <tr class="warning">
               <td>猕猴桃</td>
               <td>10</td>
               <td>3</td>
               <td>3</td>
               <td>3</td>
               <td>3</td>
           </tr>
           <tr class="danger">
               <td>芒果</td>
               <td>12</td>
               <td>4</td>
               <td>4</td>
               <td>4</td>
               <td>4</td>
           </tr>
           </tbody>
       </table>
    <!--</div>-->
</div>
</body>
</html>